<template>
  <view v-if="mchItemData">
    <view class="goodlist-item">
      <!-- 商品数量大于1 -->
      <view v-if="mchItemData.goods_list.length > 1">
        <view class="item-title">
          <i
            class="iconfont icon-store"
            style="font-size: 40rpx; color: 262626"
          ></i>
          <view class="mch_name">{{
            storeMdData ? storeMdData.name : mch.name
          }}</view>
        </view>

        <view class="goods-item-box">
          <view class="item-gooddetails" @click="handleGood">
            <!-- 商品详情 -->
            <view class="item-gooddetails-box flex-x-sb flex-y-center">
              <scroll-view class="scroll-box" scroll-x>
                <!--                <image
                  v-for="good in mchItemData.goods_list"
                  :key="good.id"
                  class="item-gooddetails-left scorll-image"
                  :src="good.goods_pic"
                  mode="aspectFit"
                ></image> -->
              </scroll-view>
              <view class="scroll-right">
                {{ $t("order.total1") }}{{ mchItemData.goods_list.length
                }}{{ $t("order.total2") }}
                <text
                  class="iconfont icon-arrow-right"
                  style="font-size: 22rpx; color: #cdcdcd"
                ></text>
              </view>
            </view>
          </view>

          <view v-for="good in mchItemData.goods_list" :key="good.id">
            <GoodsDetail :good="good"></GoodsDetail>
            <template v-if="good.form.list.length">
              <toolsForm :form.sync="good.form"></toolsForm>
            </template>
          </view>
        </view>
      </view>

      <view v-else>
        <view class="item-title">
          <i
            class="iconfont icon-store"
            style="font-size: 40rpx; color: 262626"
          ></i>
          <view class="mch_name">{{
            storeMdData ? storeMdData.name : mch.name
          }}</view>
        </view>

        <view class="goods-item-box">
          <view>
            <view
              class="item-gooddetails"
              v-for="(good, goodIn) in mchItemData.goods_list"
              :key="goodIn"
            >
              <!-- 商品详情 -->
              <GoodsDetail
                :good="good"
                :showIntegral="true"
                :showBalance="true"
                :isBooked="isBooked"
                :bookedInfo="bookedInfo"
              ></GoodsDetail>

              <!-- 后台自定义表单 -->
              <toolsForm :form.sync="good.form"></toolsForm>

              <!-- 预约商品时间展示 -->
              <view
                v-if="
                  isBooked &&
                  mch.goods_list[0].product_type != 3 &&
                  mch.goods_list[0].product_type != 4 &&
                  mch.goods_list[0].product_type != 6
                "
                class="yuyue-box"
              >
                <view class="flex-y-center flex-x-sb">
                  <view> {{ $t("alipay.time") }} </view>
                  <!-- 展示酒店预订时间  预约1 -->
                  <view
                    v-if="mch.goods_list[0].product_type == 1"
                    style="color: #8c8c8c"
                  >
                    {{ mch.yuyueData[0].date }}
                    {{ $t("order.to") }}
                    {{ mch.yuyueData[mch.yuyueData.length - 1].date }}
                  </view>
                  <!-- 展示服务预定时间 预约2-->
                  <view
                    v-else-if="mch.goods_list[0].product_type == 2"
                    style="color: #8c8c8c"
                  >
                    {{ mch.yuyueData.date }}
                    {{ mch.yuyueData.time }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 如果是普通商品可以选择配送方式 -->
      <view class="" v-if="type_diy == 1">
        <delivery-block
          v-if="!isBooked && !is_worker"
          :send_type="mchItemData.send"
          :diy_send_type="mchItemData.diy_send_type"
          @handleDelivery="handleDelivery"
        >
        </delivery-block>
      </view>

      <template
        v-if="mchItemData.send == 'delivery' && is_wechat_new_delivery != 1"
      >
        <view class="user-time" @click="showTimePopup">
          <view class="label">配送时间</view>
          <view class="label-time-info">
            <text>{{ deliveryTimeText }}</text>
            <u-icon size="22" color="#CDCDCD" name="arrow-right"></u-icon>
          </view>
        </view>

        <!-- 预约时间弹框 -->
        <timePopup
          ref="timePopup"
          :day="day"
          @selectEnd="selectEnd"
        ></timePopup>
      </template>

      <!-- 门店自提信息展示 -->
      <!-- <shop-info
        :send_type="mchItemData.send"
        :send_list="mchItemData.delivery_type"
        :shop="mchItemData.shop"
        :index="index"
        @toShowShopPopup="handleDelivery(goodIn)"
        @switchChange="setShop"
      >
      </shop-info> -->

      <!-- 配送方式 -->
      <view
        class="deliverymode"
        v-if="mch.is_area == 1 && send_type == 'express'"
      >
        <view class="deliverymode-left"></view>
        <view class="deliverymode-right-two" style="color: red">{{
          $t("order.noGoods")
        }}</view>
      </view>

      <template v-if="mchItemData.send === 'shop' && mchItemData.shop">
        <view class="shopAddress" @click="handleDelivery(currentDeliveryIndex)">
          <view class="let">自提点</view>
          <view class="con">
            <view class="address">{{ mchItemData.shop.name }}</view>
            <view class="address">{{ mchItemData.shop.address }}</view>
            <view class="time"
              >营业时间：{{ mchItemData.shop.start_time }}-{{
                mchItemData.shop.end_time
              }}</view
            >
          </view>
          <view class="rig">
            {{ mchItemData.shop.distance }}
          </view>
          <view class="icon">
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
      </template>

      <!-- 留言 -->
      <view class="message">
        <view>{{ $t("order.message") }}</view>
        <input
          type="text"
          v-model="remark"
          :placeholder="$t('order.beforeMessage')"
        />
      </view>

      <!-- 优惠券 -->
      <view
        v-if="mchItemData.coupon_list.length && !is_integral"
        class="invoice-one"
        @click="couponPopupShow"
      >
        <view class="invoice-one-left">
          <view>{{ $t("common.coupon") }}</view>
          <!-- <view>已选推荐优惠</view> -->
        </view>
        <view>
          <view
            v-if="
              mchItemData.picker_coupon && mchItemData.picker_coupon.sub_price
            "
          >
            {{ $t("goods.discountTitle")
            }}{{
              mchItemData.picker_coupon.discount_type == 1
                ? mchItemData.picker_coupon.discount + "折"
                : "￥" + mchItemData.picker_coupon.sub_price
            }}
          </view>
          <view v-else>{{ $t("common.chooseCoupon") }}</view>
          <i
            class="iconfont icon-arrow-right"
            style="color: #cdcdcd; font-size: 22rpx"
          ></i>
        </view>
      </view>
    </view>

    <!-- 选择配送方式弹窗内容 -->
    <deliveryPopup
      ref="delivery_popup"
      :send_type="mch.send_type"
      :diy_send_type="mch.diy_send_type"
      :location="mch.location"
      :current_type="mchItemData.send"
      :goods_list="mch.goods_list"
      :submitParams="submitParams"
      :mdInfo="mdInfo"
      :product_type="product_type"
      @selectShopCb="selectShopCb"
      :showMd="showMd"
    >
    </deliveryPopup>
    <!-- 选择配送方式弹窗内容 -->

    <!-- 商品清单 -->
    <goodsPopup
      ref="good_popup"
      :goodList="mchItemData.goods_list"
    ></goodsPopup>
    <!-- 商品清单 -->

    <!-- 优惠券内容 -->
    <couponPopup
      ref="coupon_popup"
      @selectCouponCb="selectCouponCb"
      :couponList="mchItemData.coupon_list"
      v-if="!is_integral"
    >
    </couponPopup>
    <!-- 优惠券内容 -->

    <!-- 不支持配送方式展示列表区域 -->
    <view v-if="delGoodsList.length" class="goodlist-item del-goodlist">
      <view class="item-title">
        <i
          class="iconfont icon-prompt"
          style="font-size: 40rpx; color: 262626"
        ></i>
        <view>{{ $t("order.noMethod") }}</view>
      </view>

      <view class="goods-item-box">
        <view
          class="item-gooddetails"
          v-for="(good, goodIn) in delGoodsList"
          :key="goodIn"
        >
          <!-- 商品详情 -->
          <GoodsDetail :good="good" :bookedInfo="bookedInfo"></GoodsDetail>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import goodsPopup from "./goods-popup.vue";
import deliveryPopup from "./delivery-popup.vue";
import couponPopup from "./popup.vue";
import deliveryBlock from "./delivery-block.vue";
import shopInfo from "./shop-info.vue";
import GoodsDetail from "@/components/order-submit/goods-detail.vue";
import toolsForm from "../tools-form.vue";
import timePopup from "./timePopup.vue";

export default {
  components: {
    goodsPopup,
    deliveryPopup,
    couponPopup,
    deliveryBlock,
    shopInfo,
    GoodsDetail,
    toolsForm,
    timePopup
  },
  data() {
    return {
      sta: "",
      type_diy: null,
      send_type: "", // 默认为配送列表的第一个
      picker_coupon: null, // 选中的优惠券
      remark: "", // 商家留言
      use_integral: 1, //使用积分
      shop: null,
      shop_id: 0,
      goodPopupData: [], // 商品清单数据
      delGoodsList: [], //需要剔除的商品列表
      goodsList: null, //自提门店列表
      mchItemData: null, //当前商家订单数据
      currentDeliveryIndex: 0, //当前配送方式的索引
      deliveryData: {}, //预约时间
      deliverOrderNo: "",
      day: 2,
      is_wechat_new_delivery: ""
    };
  },
  props: {
    // 当前商家订单信息
    mch: {
      type: Object,
      default: function () {
        return null;
      }
    },
    // 地址信息
    address_id: {
      type: [String, Number],
      default: 0
    },
    // 当前商家索引
    index: {
      type: [String, Number],
      default: "0"
    },

    //diy数据
    nameValue: {
      type: String,
      default: ""
    },

    sendTemplate: {
      type: String,
      default: ""
    },

    //预订单数据
    submitParams: {
      type: String,
      default: ""
    },
    // 卡劵id,  主要用来获取预订单数据.后端判断是否兑换商品.返回对应订单信息
    verify_card_id: {
      type: [String, Number],
      default: 0
    },

    // 门店信息
    mdInfo: {
      type: Object,
      default() {
        return null;
      }
    },
    is_integral: {
      type: Boolean,
      default: false
    },

    bookedInfo: {
      type: Array,
      default() {
        return [];
      }
    },

    submitRequest: {
      type: [Object, String],
      default() {
        return null;
      }
    },
    product_type: {
      type: [Number, String],
      default() {
        return 0;
      }
    },

    activity_cut_price_order_id: {
      type: String,
      default: ""
    },

    is_seckill: {
      type: [String, Number],
      default: ""
    },

    worker_id: {
      type: [String, Number],
      default: ""
    },

    is_worker: {
      type: [String, Number],
      default: ""
    },
    activity_wechat_room_id: {
      type: [String, Number],
      default: ""
    },

    mchList: {
      type: Array,
      default() {
        return [];
      }
    },

    showMd: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    this.getDiySystemPages();
  },
  computed: {
    // 判断是否为预约商品
    isBooked() {
      return (
        this.mch.goods_list.length == 1 &&
        this.mch.goods_list[0].product_type != 0 &&
        this.mch.goods_list[0].product_type != 1 &&
        this.mch.goods_list[0].product_type != 2 &&
        this.mch.goods_list[0].product_type != 4 &&
        this.mch.goods_list[0].product_type != 6
      );
    },
    deliveryTimeText() {
      if (this.deliveryData.time == "立即配送") {
        return "立即配送";
      } else if (this.deliveryData.time) {
        return `${this.deliveryData.day} ${this.deliveryData.time}`;
      }
      return "立即配送";
    }
  },
  watch: {
    //    主要监听: 优惠券,配送方式,用于计算订单金额
    mchItemData: {
      handler(val) {
        this.$emit("setPayPrice");
      },
      deep: true
    },
    nameValue: {
      handler(val) {
        this.$set(this.mchItemData, "send", val);

        switch (val) {
          case "delivery":
            this.$nextTick(() => {
              // 生成date数据
              this.$refs.timePopup.addDate();
              // 默认选中操作配送时间操作
              this.$refs.timePopup.handleConfirm();
            });
            break;

          case "online":
            break;

          default:
            this.$emit("updateDeliveryPrice", 0);
            break;
        }

        // 重新生成数据
        this.screeningDistribution();
      },
      deep: true
    },
    remark(val) {
      // this.$emit("setPayPrice");
      this.mchItemData.remark = val;
    },
    // 监听是否使用优惠券变化，通知父组件价格变动
    use_integral(val) {
      this.$emit("setPayPrice");
    }
  },
  // filters: {
  //   noPassByMobile(str) {
  //     if (null != str && str != undefined) {
  //       var pat = /(\d{3})\d*(\d{4})/;
  //       return str.replace(pat, "$1****$2");
  //     } else {
  //       return "";
  //     }
  //   },
  // },
  created() {
    // 筛选默认配送方式
    // this.screeningDistribution();
  },
  methods: {
    // 获取diy系统页面配置数据
    getDiySystemPages() {
      this.$allrequest.diyNew.getDiySystemPages({}, true).then((res) => {
        if (!res.code) {
          let list = res.data.list;
          let data = {};
          if (!list.length) return;
          list.forEach((d) => {
            d.template = JSON.parse(d.template);
            if (d.template.system_type == "orderPreview") {
              data = d;
              // 判断diy配送的自定义
              this.type_diy = data.template.templates[1].params.type;
            }
          });
        }
      });
    },

    //  点击门店switch
    setShop(e) {
      let { value, index, shop } = {
        ...e
      };

      this.goodsList.forEach((d, i) => {
        if (index == i) {
          d.send = value ? "shop" : "express";
          d.shop_id = value ? shop.id : "";
          d.shop = value ? shop : null;
        }
      });
    },

    // 筛选配送方式,筛选商品数据分割
    async screeningDistribution() {
      // 快递数组
      let expressArr = this.mch.goods_list.filter((item) => {
        if (item.delivery_type.indexOf("express") != -1) {
          return item;
        }
      });
      let expressNum = expressArr.length;

      // 门店自提数组
      let shopArr = this.mch.goods_list.filter((item) => {
        if (item.delivery_type.indexOf("shop") != -1) {
          return item;
        }
      });
      let shopNum = shopArr.length;

      // 同城配送数组
      let deliveryArr = this.mch.goods_list.filter((item) => {
        if (item.delivery_type.indexOf("delivery") != -1) {
          return item;
        }
      });
      let deliveryNum = deliveryArr.length;
      // send为真表示切换配送方式许重新生成数据
      if (this.mchItemData?.send) {
        let delGoodsList = [];
        let goodsList = [];
        this.mch.goods_list.forEach((item) => {
          if (item.delivery_type.indexOf(this.mchItemData.send) == -1) {
            delGoodsList.push(item);
          } else {
            goodsList.push(item);
          }
        });
        if (!goodsList.length) {
          this.$utils.toast(this.$t("order.noUseMethod"));
          this.mchItemData.send = "";
          return;
        }
        this.delGoodsList = delGoodsList;
        this.mchItemData.goods_list = goodsList;
      } else {
        this.mchItemData = {
          ...this.mch,
          goods_list: this.mch.goods_list
        };
        this.mchItemData.send = "";

        // // 配送数量最多  商家开启当前配送方式
        // if (
        //   expressNum >= shopNum &&
        //   expressNum >= deliveryNum &&
        //   this.mch.send_type.indexOf("express") != -1
        // ) {
        //   // 过滤出没有当前配送方式
        //   this.delGoodsList = this.mch.goods_list.filter((item) => {
        //     if (item.delivery_type.indexOf("express") == -1) {
        //       return item;
        //     }
        //   });
        //   this.mchItemData = {
        //     ...this.mch,
        //     goods_list: expressArr
        //   };
        //   this.mchItemData.send = "express";
        // }
        // // 门店自提数量最多 商家开启当前配送方式
        // else if (
        //   shopNum >= expressNum &&
        //   shopNum >= deliveryNum &&
        //   this.mch.send_type.indexOf("shop") != -1
        // ) {
        //   this.mch.shop = this.mch.shop_list[0];
        //   // this.mch.shop = this.
        //   // 过滤出没有当前配送方式
        //   this.delGoodsList = this.mch.goods_list.filter((item) => {
        //     if (item.delivery_type.indexOf("shop") == -1) {
        //       return item;
        //     }
        //   });
        //   this.mchItemData = {
        //     ...this.mch,
        //     goods_list: shopArr
        //   };
        //   this.mchItemData.send = "shop";
        // }
        // // 同城配送数量最多 商家开启当前配送方式
        // else if (
        //   deliveryNum >= expressNum &&
        //   deliveryNum >= shopNum &&
        //   this.mch.send_type.indexOf("delivery") != -1
        // ) {
        //   // 过滤出没有当前配送方式
        //   this.delGoodsList = this.mch.goods_list.filter((item) => {
        //     if (item.delivery_type.indexOf("delivery") == -1) {
        //       return item;
        //     }
        //   });
        //   this.mchItemData = {
        //     ...this.mch,
        //     goods_list: shopArr
        //   };
        //   this.mchItemData.send = "delivery";
        // }
      }
      // 重新更改mchItemData
      await this.mchItemDataChange();
    },

    // 展示商品明细组件
    handleGood() {
      this.$refs.good_popup.setShowPayPopup();
    },

    // 获取订单信息
    async getOrder(mch_list) {
      var { address_id } = this,
        list = JSON.parse(JSON.stringify(mch_list));

      let { submitRequest } = this;
      if (typeof submitRequest === "string") {
        submitRequest = JSON.parse(submitRequest);
      }

      let item = submitRequest[0];
      if (item.product_type && [1, 2].includes(item.product_type)) {
        list[0].list = item.list;
        list[0].product_type = item.product_type;
      }

      // 原本参数
      console.log("JSON.stringify(list)", JSON.stringify(list));

      var params = {
        // 新增this.submitRequest参数
        mch_list: this.submitRequest,
        address_id: address_id,
        _from: "mini",
        verify_card_id: this.verify_card_id,
        send: this.sendTemplate,
        longitude: uni.getStorageSync("locationData").longitude || "",
        latitude: uni.getStorageSync("locationData").latitude || ""
      };

      if (this.activity_cut_price_order_id) {
        params.activity_cut_price_order_id = this.activity_cut_price_order_id;
      }

      if (this.is_seckill) {
        params.is_seckill = this.is_seckill;
      }

      if (this.worker_id) params.worker_id = this.worker_id;
      if (this.is_worker) params.is_worker = this.is_worker;

      if (this.activity_wechat_room_id)
        params.activity_wechat_room_id = this.activity_wechat_room_id;

      // #ifdef APP-PLUS
      params._from = "app";
      // #endif

      // 拼团接口及拼团id
      let requestName = "submitPreview";
      let pt_number = this.$root.pt_number;
      if (pt_number) {
        params.pt_number = pt_number;
        requestName = "ptSubmitPreview";
      }

      const res = await this.$allrequest.order[requestName](params, true);

      if (res.code != 0) {
        this.$utils.toast(res.msg);
        return false;
      }
      this.sta = res.data.template_id;
      this.$emit("cass", res.data.template_id);
      res.data.mch_list.forEach((el) => {
        el.integral = {
          forehead: Math.floor(el.integral.forehead),
          forehead_integral: Math.floor(el.integral.forehead_integral)
        };

        el.goods_list.forEach((e) => {
          e.integral = {
            forehead: Math.floor(e.integral.forehead),
            forehead_integral: Math.floor(e.integral.forehead_integral)
          };
        });
      });

      return res;
    },

    // 重新查询商品预订单
    async mchItemDataChange() {
      let delGoodsList = this.delGoodsList;
      let options = JSON.parse(this.submitParams)[0];
      let newMchList = [];
      if (this.mch.goods_list.product_type == 3) {
        newMchList = this.mchItemData.goods_list;
      } else {
        // 返回当前配送方式新的商品cartid
        newMchList = options.goods_list.filter((item) => {
          // 购物车订单数据
          if (
            delGoodsList.findIndex((item1) => {
              return item1.cart_id == item.cart_id;
            }) == -1
          ) {
            return item;
          }
        });
      }

      let res = await this.getOrder([
        {
          mch_id: options.mch_id,
          goods_list: newMchList
        }
      ]);

      let { mchItemData } = this;

      this.mchItemData = {
        ...res.data.mch_list[this.index],
        remark: mchItemData.remark || "",
        send: mchItemData.send || "",
        shop: mchItemData.shop || "",
        template_id: ["shop"]
      };
    },

    // 展示配送方式组件
    selectDelivery() {
      this.$refs.delivery_popup.setShowPayPopup();
    },

    // 展示优惠券弹框组件
    couponPopupShow() {
      this.$refs.coupon_popup.setShowPopup();
    },

    // 选择配送方式回调
    selectShopCb(e) {
      if (e.type !== "delivery") {
        this.$emit("updateDeliveryPrice", 0);
      }
      if (e.type === "shop") {
        this.$set(this.mchItemData, "send", e.type);
        this.$set(this.mchItemData, "shop", e.shop);
      } else {
        this.$set(this.mchItemData, "send", e.type);
      }
      if (e.type === "delivery") {
        this.$nextTick(() => {
          // 生成date数据
          this.$refs.timePopup.addDate();
          // 默认选中操作配送时间操作
          this.$refs.timePopup.handleConfirm();
        });
      }

      this.$emit("changeSend", e.type);
      // this.$nextTick(()=>{
      // // 重新生成数据
      // this.screeningDistribution();
      // })
    },

    // 选择优惠券回调
    selectCouponCb(e) {
      this.$set(this.mchItemData, "picker_coupon", e.coupon);
    },

    // 点击选择配送
    handleDelivery(index) {
      this.currentDeliveryIndex = index;
      this.selectDelivery();
    },
    // 选择表单时间回调
    chooseTime(e, index) {
      // this.mch.form.list[index].default = e.detail.value
      this.$set(this.mchItemData.form.list[index], "default", e.detail.value);
    },
    chooseDate(e, index) {
      this.$set(this.mchItemData.form.list[index], "default", e.detail.value);
    },
    changeCheckbox(e, index) {
      this.mchItemData.form.list[index].default = e;
    },
    // 点击选择图片
    uploadImg(index) {
      this.$utils.uploadImage(1, (res) => {
        this.mchItemData.form.list[index].default = res;
      });
    },

    showTimePopup() {
      this.$refs.timePopup.showPopup();
    },
    selectEnd(e) {
      this.$nextTick(() => {
        this.deliveryData = e;
        this.mchItemData.delivery_time =
          e.time == "立即配送" ? `` : `${e.date} ${e.time.replace("：", ":")}`;
        this.$refs.timePopup.closePopup();
        let submitOrderData = {};
        submitOrderData.mch_list = JSON.stringify([this.mchItemData]);
        submitOrderData.address_id = this.address_id;
        submitOrderData.order_no = this.deliverOrderNo;
        submitOrderData.data = JSON.stringify(this.mchList);
        this.$allrequest.order
          .preSubmitOrder(submitOrderData, true)
          .then((preRes) => {
            if (preRes.data.resultcode == 0) {
              if (preRes.data?.LocalDeliveryFreight?.day) {
                this.day = parseInt(preRes.data.LocalDeliveryFreight.day);
              }
              this.deliverOrderNo = preRes.order_no;

              this.$emit("updateDeliveryPrice", preRes.data.fee);
            } else {
              uni.showToast({
                title: this.$t("order.fail"),
                duration: 2000
              });
            }

            this.is_wechat_new_delivery =
              preRes.data.is_wechat_new_delivery || "";
          });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
view {
  color: #262626;
  font-size: 28rpx;
}

.goodlist-item {
  margin-top: 22rpx;
  background-color: #ffffff;
  padding: 1rpx 30rpx;

  > view {
    margin: 30rpx 0;
  }
}

.invoice-one {
  display: flex;
  justify-content: space-between;
  align-items: center;

  > view:last-child {
    display: flex;
    align-items: center;

    image {
      margin-left: 20rpx;
      width: 12rpx;
      height: 20rpx;
    }
  }

  .invoice-one-left {
    display: flex;
  }
}

.item-title {
  display: flex;
  align-items: center;

  view {
    font-size: 28rpx;
  }
}

.item-gooddetails {
  border-bottom: 1px solid #f2f2f2;

  &:nth-last-child(1) {
    border: 0;
  }

  .item-gooddetails-box {
    padding-top: 30rpx;
    padding-bottom: 30rpx;

    .item-gooddetails-left {
      width: 180rpx;
      height: 180rpx;
      border-radius: 10rpx;
    }

    .item-gooddetails-right {
      flex: 1;
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      > view:nth-child(1) {
        font-size: 28rpx;
      }

      > view:nth-child(2) {
        font-size: 22rpx;
        color: #8c8c8c;
        margin: 10rpx 0;
      }

      > view:nth-child(3) {
        margin-bottom: 17rpx;
        display: flex;
        justify-content: space-between;

        view:first-child {
          font-size: 34rpx;
          font-weight: bold;
          color: #f2270c;

          text:nth-child(1) {
            font-size: 20rpx;
          }
        }

        view:last-child {
          font-size: 24rpx;
        }
      }

      > view:nth-child(4) {
        font-size: 18rpx;

        > view {
          padding: 0 5rpx;
          display: inline-block;
          font-size: 18rpx;
          color: #f22d14;
          border: 1rpx solid #ff978a;
          border-radius: 4rpx;
        }
      }
    }

    .verify-right {
      flex: 1;
      width: 0;
      margin-left: 24rpx;

      > view:nth-child(1) {
        font-size: 28rpx;
      }

      > view:nth-child(2) {
        font-size: 22rpx;
        color: #8c8c8c;
        margin: 10rpx 0;
      }

      > view:nth-child(3) {
        > view:nth-child(1) {
          font-size: 34rpx;
          font-weight: 600;
        }
      }
    }
  }

  .scroll-box {
    flex: 1;
    max-width: 580rpx;
    white-space: nowrap;

    .scorll-image {
      width: 120rpx;
      height: 120rpx;
      margin-right: 10rpx;
    }
  }
}

.item-gooddetails-two {
  margin-top: 42rpx;

  .good-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .good-left-side {
      image {
        margin-right: 20rpx;
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
      }
    }

    .good-right-side {
      display: flex;
      align-items: center;

      view {
        font-size: 26rpx;
      }

      image {
        margin-left: 22rpx;
        width: 12rpx;
        height: 20rpx;
      }
    }
  }
}

.user_info {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 11rpx 0 30rpx 0;
  font-size: 26rpx;
  color: #262626;

  view:nth-child(1) {
    font-weight: 400;
    color: #f33016;
    line-height: 44rpx;
    margin-right: 8rpx;
  }
}

.deliverymode {
  margin-top: 44rpx;
  display: flex;
  justify-content: space-between;

  .deliverymode-right {
    .deliverymode-right-one {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      image {
        width: 12rpx;
        height: 20rpx;
        margin-left: 20rpx;
      }
    }

    .deliverymode-right-two {
      margin-top: 10rpx;
      display: flex;
      padding-right: 32rpx;
      justify-content: flex-end;

      view:first-child {
        margin-right: 14rpx;
        color: #f33016;
      }
    }
  }
}

.message {
  display: flex;
  align-items: center;
  font-size: 28rpx;

  input {
    text-align: right;
    flex: 1;
    margin-left: 28rpx;
    font-size: 28rpx;
  }
}

.pay-top {
  height: 109rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 36rpx;

  view {
    font-size: 36rpx;
    font-weight: bold;
  }

  image {
    width: 40rpx;
    height: 40rpx;
  }
}

.pay-way {
  padding: 0rpx 36rpx 34rpx;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1rpx solid #f2f2f2;

  .pay-way-list {
    margin-right: 24rpx;
    margin-bottom: 24rpx;
    padding: 18rpx 36rpx;
    border-radius: 30rpx;
    background-color: #f2f2f2;
    font-size: 22rpx;
    color: #bfbfbf;
  }

  .select-way-list {
    padding: 16rpx 34rpx;
    border: 1rpx solid #f2270c;
    background-color: #fcedeb;
    color: #f2270c;
  }
}

.self-take {
  padding: 38rpx 36rpx 34rpx;
  border-bottom: 1rpx solid #f2f2f2;

  .self-take-one {
    font-weight: bold;
  }

  .self-take-two {
    margin-top: 36rpx;
    display: flex;
    align-items: center;

    view {
      font-size: 24rpx;
    }

    input {
      margin-left: 50rpx;
      flex: 1;
      font-size: 24rpx;
    }
  }
}

.confrim {
  margin-top: 360rpx;
  padding: 12rpx 36rpx;

  view {
    width: 100%;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    font-size: 30rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #f3150c, #f14b0c);
    border-radius: 38rpx;
  }
}

.distribution-method {
  font-size: 24rpx;
  color: #fa0000;
}

.goodlist-top {
  height: 109rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 36rpx;

  > view:first-child {
    font-size: 36rpx;
    font-weight: bold;
  }

  > view:last-child {
    display: flex;
    align-items: center;

    view {
      font-size: 24rpx;
    }

    image {
      margin-left: 24rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.good-list-item {
  padding: 0rpx 36rpx 24rpx;
  height: 720rpx;
  border-bottom: 1rpx solid #f2f2f2;

  .item-gooddetails-right-two {
    flex: 1;
    margin-left: 24rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    > view:nth-child(1) {
      font-size: 24rpx;
      width: 460rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    > view:nth-child(2) {
      width: 460rpx;
      margin: 26rpx 0rpx;
      display: flex;
      justify-content: space-between;

      view:first-child {
        font-size: 34rpx;
        font-weight: bold;
        color: #f2270c;
      }

      view:last-child {
        font-size: 24rpx;
      }
    }

    > view:nth-child(3) {
      view {
        display: inline-block;
        font-size: 20rpx;
        color: #f22d14;
        border: 1rpx solid #ff978a;
        border-radius: 4rpx;
      }
    }
  }
}

.goodlist-bottom {
  margin: 47rpx 0rpx;
  text-align: center;
  font-size: 22rpx;
  color: #949494;
}

.coupon-item {
  padding: 20rpx;
}

.coupon-info {
  display: flex;
  // justify-content: space-between;
  align-items: center;
}

.goodsfreight {
  margin-top: 46rpx;

  > view {
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    view:last-child {
      color: #f2270c;
      font-weight: bold;
    }
  }

  > view:first-child {
    margin-top: 0rpx;

    view:last-child {
      color: #f2270c;
      font-weight: bold;
    }
  }
}

.selectShop {
  display: inline;
  border: 1rpx solid #999999;
  height: 36rpx;
  color: #999999;
  font-size: 24rpx;
  line-height: 36rpx;
  border-radius: 18rpx;
  padding: 0 18rpx;
  white-space: nowrap;
}

.shop_address {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.formBox {
  display: flex;
  width: 100%;
  flex-direction: column;

  .formName {
    margin-top: 46rpx;
  }

  .formItem {
    width: 100%;
    padding: 25rpx 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .itemTitle {
      width: 120rpx;
      min-width: 120rpx;
      text-align: right;
      margin-right: 20rpx;

      .required {
        color: #f2270c;
      }
    }

    .itemContent {
      flex: auto;

      .chooseTime {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .toChoose {
          display: flex;
          align-items: center;
          color: #333;

          text:nth-child(2) {
            width: 15rpx;
            height: 15rpx;
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
            transform: rotate(-45deg);
            margin-left: 10px;
          }
        }

        .choosedPic {
          width: 100rpx;
          height: 200rpx;
        }
      }

      .textarea {
        width: 100%;
      }
    }
  }
}

.goodlist-item {
  .yuyue-box {
    margin: 30rpx 0;

    > view:nth-child(1) {
      font-size: 28rpx;
      line-height: 36rpx;

      view {
        font-size: inherit;
      }
    }
  }
}

.shopAddress {
  position: relative;
  display: flex;
  padding: 20rpx 70rpx 20rpx 24rpx;
  background: #f6f6f6;
  border-radius: 16rpx;
  font-size: 26rpx;
  color: #262626;

  .con {
    flex: 1;
    overflow: hidden;
    padding: 0 8rpx 0 16rpx;

    .address {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .icon {
    position: absolute;
    right: 22rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26rpx;
  }

  .iconfont {
    color: #cdcdcd;
  }
}

.mch_name {
  font-weight: bold;
}

.user-time {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15rpx 0;
  position: relative;
  z-index: 2;

  .label {
    font-family: PingFang SC;
    color: #262626;
  }

  .label-time-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    text {
      font-family: PingFang SC;
      font-weight: 600;
      color: #f0250e;
      display: inline-block;
      margin-right: 10rpx;
    }
  }
}
</style>
